<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>班级全家福</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/jquery-weui.min.css">
<link rel="stylesheet" href="css/weui.min.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-weui.min.js"></script>
<script src='js/swiper.min.js'></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="outwrap" style="width: 100%;height: 100%;position: relative;overflow: hidden;">
<div class="page-container">
    <div class="weui-tab">
       <!-- 头部 -->
        <div class="weui-navbar page-top">
            <a class="left" href="javascript:history.back(-1);" >
                <img src="images/g_03.png" width="20px" height="20px">
            </a>                   
            <span class="t-title">班级空间</span>  
            <a class="right login" href="javascript:;">
                <img src="images/me.png" width="20px" height="20px">
            </a>
        </div>

        <!-- 内容区 -->
        <div class="weui-tab__bd page-wrap" >
            <div class="p-head">
                <img src="images/wu/tt_02.jpg"  class="bg-img">
                <div class="img-outer">
                    <div class="p-head-top">
                        <img class="r-img" src="images/wu/t5.png" />
                        <p class="mingyan">好好学习,天天向上!</p>
                        <p class="name">高三(12)班 &nbsp;<a href="index.html"><img src="images/re.png" height="19px" style="margin-top:3px;"></a></p>
                        <p class="liang">今日访问量:<span>20</span> 总浏览量:<span>150000</span></p>                                     
                    </div>
                    <a href="###" class="h-reload">
                        <img src="images/yy.png" alt="" width="20px" height="20px">
                    </a>
                    <a href="classroom_set.html" class="h-set">
                        <img src="images/set.png" alt="" width="22px" height="22px">
                    </a>
                    <div class="p-head-botm">
                         <ul>
                            <li><a dc="jieshao"><i class="bg1"></i>班级介绍</a></li>
                            <li><a href="classroom_ev.html"><i class="bg2"></i>班级大事记</a></li>
                            <li><a dc="tuwen"><i class="bg3"></i>班级图文</a></li>
                         </ul>
                         <div class="selectList"> 
                              <div class="jieshao">
                                  <a href="classroom_textlist.html">家委会</a>
                                  <a href="classroom_textlist.html">教师团队</a>
                                  <a href="classroom_quanjiafu.html">班级全家福</a>
                                  <a href="classroom_textlist.html">班委会</a>
                              </div>
                              <div class="tuwen">
                                  <a href="classroom_liuyanban.html">动态</a>
                                  <a href="classroom_wzlist.html">文章</a>
                                  <a href="classroom_pic.html">相册</a>
                              </div>
                          </div>                                         
                    </div>
                </div>
            </div>

            <!-- 学校介绍 -->
            <div class="p-body">
              <div class="y-cont-list">
                 <div class="y-cont-input">
                     <a href="classroom_liuyan.html">说点什么</a>
                 </div>
                 <div class="weui-cell p-liuyan">
                       <div class="weui-cell__hd p-l-img"><img src="images/wu/t5.png" ></div>
                       <div class="weui-cell__bd p-l-cont">
                          <p>张晓玲 老师</p>
                          <p class="p-l-time">2018/6/18 08:55</p>
                          <p class="p-b-text">都是固定价格地方就 地方就 京东方绝对法官地方上的双方都</p>
                          <ul class="p-l-imgs">
                              <li><a ><img src="images/wu/1.jpg"></a></li>
                              <li><a ><img src="images/wu/1.jpg"></a></li>
                              <li><a ><img src="images/wu/1.jpg"></a></li>
                              <li><a ><img src="images/wu/1.jpg"></a></li>            
                              <li><a ><img src="images/wu/1.jpg"></a></li>            
                              <li><a ><img src="images/wu/1.jpg"></a></li>            
                              <li><a ><img src="images/wu/1.jpg"></a></li>            
                              <li><a ><img src="images/wu/1.jpg"></a></li>            
                              <li><a ><img src="images/wu/1.jpg"></a></li>            
                          </ul>
                          <p class="p-l-num">
                            浏览<span>55</span>次 
                            <a class="ico-liuyan"><img src="images/y2.png" width="100%"></a>
                            <a class="ico-zanover"><img src="images/y1.png" width="100%"></a>
                          </p>
                          <div class="p-l-text">
                             <i></i>
                             <p>
                                <span class="ico-zanover"><img src="images/y3.png" width="100%"></span>
                                <span class="color1 zan-role">小娟老师, 王晓丽家长, 王小龙老师</span>
                                等
                                <span class="color1 zan-num">3</span>
                                人觉得很赞
                             </p>
                             <ul class="liuyans">
                                <li><span class="color1">王晓丽的家长 : </span><span>真好！</span></li>
                                <li><span class="color1">知春的家长 : </span><span>以后我们就有自己的圈子啦！</span></li>
                             </ul>
                             <a class="gBtn">更多评论...</a>
                          </div>
                       </div>
                 </div> 
              </div>
            </div>
        </div>
    </div>

</div>
</div>
</body>
<script>
//使 a 的高度时其宽度的 27/40,并且是 img 居中, 且随屏幕改变
$(function(){
    $.pushFn(
        function(){
           $.swFn.imgCenter($.swFn.fang(".p-l-imgs li",27,40).find("img")); 
        }
    )();
})


//图片浏览
$(".p-l-imgs").find("a").click(function(){
    var imgs = [];
    $(this).parent().parent().find("img").each(function(i,v){
        imgs.push(this.src);
    })

    $.photoBrowser({ items:imgs, initIndex:$(this).parent().index(), onClose:function(){
        $(".weui-photo-browser-modal").remove();
    } }).open();
})


//留言功能
  var _html = $(
        '<form id="liuyan_form">\
            <div>\
               <textarea name="pinglun"></textarea>\
            </div>  \
            <a id="send">发送</a>\
        </form>'
     );
  $("#outwrap").append(_html);

  $(".ico-liuyan").click(function(){        console.log( _html.css("bottom") )
      if(_html.css("bottom") == "-50px" ){
          _html.animate({bottom:0},100,function(){
              _html.find("#send").click(function(){
                  _html.animate({bottom:-50},100)
                  // $.ajax({
                  //    url:"",
                  //    type:"post",
                  //    data:   ,
                  //    success:function(){

                  //    },
                  //    error:function(){

                  //    }
                  // })
              })
          })
      }else{
          _html.animate({bottom:-50},100)
      }
      return false;
  });


  $(document).click(function(){
      _html.animate({bottom:-50},100)
  })
  _html.click(function(){ return false; })






</script>

</html>